<template>
  <div style="font-size: 12px; line-height: 60px;display: flex">
    <div style="flex:1;font-size: 18px">
      <div :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></div>
      <el-breadcrumb style="display: inline-block" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="titleName of switchRouter" :key="titleName.path">
          <a>{{ titleName.meta.title }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-dropdown style="width: 130px;cursor: pointer">
      <div style="display: flex">
        <div style="margin-top: 10px;margin-right: 15px">
          <el-row class="demo-avatar demo-basic">
            <el-col :span="12">
              <div class="demo-basic--circle">
                <div class="block">
                  <el-avatar :size="40" :src="user.avatar"></el-avatar>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <span sy>{{ user.nickname }} </span>
        <i class="el-icon-caret-bottom" style="margin-left: 5px;margin-top: 23px"></i>
      </div>
      <el-dropdown-menu slot="dropdown" style="margin-top:-15px;width: 100px;text-align: center">
        <el-dropdown-item>
          <router-link to="/userMsg" style="text-decoration: none">个人信息</router-link>
        </el-dropdown-item>
        <el-dropdown-item>
          <span style="text-decoration: none" @click="logout">安全退出</span>
        </el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>

  </div>

</template>

<script>
import router from "@/router";

export default {
  props: ['collapse', 'collapseBtnClass', 'switchRouter'],
  data() {
    return {
      // 判断是否有user，如果有，则取出user，并转为json格式，没有则为null
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  methods: {
    logout() {
      this.request.delete("/user/logout").then(res => {
        if (res.code == 200) {
          router.push({path: '/login'})
          localStorage.removeItem("user")
          localStorage.removeItem("menuList")
          this.$message.success("退出成功")
        }
      })

    }
  },

}
</script>


<style scoped>

</style>